hook是react16.8新增的功能，我看了一下，截止到我写这篇文章的时间，react已经迭代到了18.2的版本了。根据react文档来看，16.8是2019年2月发布的，也就是hook已经发布了4年了，可喜可贺可喜可贺。不过我相信依然会有一些刚接触react的并没有使用过hook（有没有我也写到这里了，不能停了啊，毕竟是我23年第一篇文章），所以我的这篇文章就来当做一个hook的入门讲解吧。本文只是入门，没有任何深入讲解和源码分析。

在hook之前，react也是可以使用函数作为组件的，不过这个时候的函数就和class里面的render函数一样，只负责执行，需要使用class里面的state作为参数或变量，或者作为静态组件展示在页面上面。这个时候的函数组件用法就和render函数一样，return元素就可以了。

虽然function组件只作为函数执行，但是依然有react组件的一贯问题，只能返回一个根组件，如果需要返回多个元素的话，建议使用fragment元素包裹。

我感觉class组件这种形式挺方便的，但是有人认为class组件有点过于繁琐了，所以Facebook公司开始在函数组件上面发力了。我习惯把这个行为叫做挺能折腾，也有人会说这个行为是工作量不饱和。

原来的函数组件没有内部变量每次render函数执行的时候函数组件就执行一次，里面的变量会被重新声明赋值，如果不借助外部变量，这个函数组件就是一个静态组件。所以hook里面第一个api出现了，useState。

useState用法很简单。

这个是我从react官方文档里面复制过来的，可以看出来，想使用useState的第一步就是把从react组件里面获取到useState。这个操作有别于class组件里面的直接使用state和setState，hook需要先引入再调用，也就是说不止useState，hook相关的所有的方法，都需要先引入才可以使用。

变量的生命用const也好，let也好，都无所谓，都可以正常运行。useState的变量生命使用了结构赋值的方式，useState其实是返回了一个数组，第0位是声明的变量，第1位是改变变量的方法。当然也不是完全没有区别，如果用const变量无法直接修改，不过都用hook了，应该也很少有直接修改的吧。不过直接修改也有效，以上面复制的代码为例，如果直接讲const改为let，然后直接count = count + 1，这时候在hook里面count确实是加1了，但是页面并没有刷新，此时如果父组件变动导致组件刷新，count的加1就取消了，如果 Example组件的其他部分触发了组件刷新，count的加1状态就可以保留。

不过实际开发过程中不建议如此使用，容易意外频发不说，也不是太正规的使用方法，而且这样的话还会导致useEffect无法检测到count的变动，这个后面再说。

useState返回的两个值，count就相当于class组件state里面的变量，setCount就相当于setState。useState只支持一个参数，就是变量初始值，setCount也只支持一个参数，可以是变量值，也可以是回调函数。

还是用react官方文档的例子，setCount可以直接传一个值作为参数，那么count的值就变成了initialCount，或者传入一个回调函数，prevCount就是setCount运行时count的值，回调函数返回的值就是count的新值，我说的有点乱，大体上可以理解为setCount(prevCount => prevCount - 1)最终的结果是setCount(count-1)，不过绝对不可以这么理解，因为在异步执行的时候结果是不一样的，不过这篇文章只是入门文章，不讲那么深刻（起码我感觉有点深刻了）。

setState还有一个要求，就是不能和if语句一起执行

这种使用方法是不可以的，具体原因很复杂，我的理解是这样声明会让react无法理解，具体为什么无法理解还得从一个叫链表的数据结构说起，就复杂了，入门讲解，没有那么复杂。

这时候函数组件已经有了自己的变量了，但是不能把运行时需要的方法直接放到函数组件里面运行，这样会导致每次组件执行和更新的时候，这个方法都会运行，既浪费也没有意义。所以需要一个像生命周期一样的东西，在hook里面可以是useEffect。

useEffect可以先当生命周期来用，不过在细节上不太一样，毕竟都换成了hook了，再弄一个一模一样的生命周期也没有意义。

还是那句话，react官方文档的例子。

函数组件执行的时候useEffect会执行一次，然后当setCount改变了count的值的时候，useEffect还会执行一次。可以和注释说的一样直接当做componentDidMount 和 componentDidUpdate用。

当然还是有区别的，我先放一个用的比较具体的useEffect例子，然后再做讲解。

我们先不管这些奇怪的变量都是什么，我先简单讲解一下这个useEffect的用法，我会对照这个class组件的生命周期来说。

useEffect支持两个参数，第一个参数需要是一个函数，函数没有默认参数，可以返回一个函数或者返回空，如果返回函数的话会在下一次useEffect执行之前先执行返回的函数。第二个参数是一个数组，数组里面是useEffect绑定的变量，如果没有发生变化则这个useEffect不执行，如果发生变化useEffect会执行。所以一个useEffect可以等价三个生命周期。

一个hook里面可以有无数个useEffect和useState，如果一个useEffect第二个参数是一个[]，那么这个useEffect可以等价于componentDidMount和componentWillUnmount，也就是hook首次执行的时候执行一次，hook消失的时候执行一次返回的函数。前期使用的话这样就差不多了。

说的比较简单，毕竟入门讲解嘛。这两个方法大体上就能应对一些简单的开发项目了，等到项目复杂了之后估计还需要去学习useMemo，useCallback等等大量hook的api了，不过入门讲解不讲那么多，毕竟都入门了，我说那么多，能接受的人估计也不需要我这个入门的讲解了。